/**
 * plugins/vuetify.js
 *
 * Framework documentation: https://vuetifyjs.com`
 */

// Styles
// import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import { getLocalDark } from "@/hooks/useIsDark";

// Composables
import { createVuetify } from "vuetify";

const defaultCustomTheme = {
  dark: false,
  colors: {
    background: "#F4F7FA",
    surface: "#F4F7FA",
    primary: "#ea580c",
    secondary: "#E8E9EC",
    "on-surface": "#28282C",
  },
  variables: {
    title: "#28282C",
    subtitle: "#4b5563",
    "theme-icon": "#48454D",
    "bg-img": "'https://oss.top237.top/img/calm-sea-on-sunset-with-lighthouse-free-vector.jpg'",
    "bg-img-url": "url('https://oss.top237.top/img/calm-sea-on-sunset-with-lighthouse-free-vector.jpg')",
  },
};

const defaultCustomDarkTheme = {
  dark: true,
  colors: {
    background: "#141218",
    surface: "#000",
    primary: "#ea580c",
    secondary: "#35343A",
    "on-surface": "#fff",
  },
  variables: {
    title: "#fff",
    subtitle: "#A5A2A8",
    "theme-icon": "#C8C5CF",
    "bg-img": "'https://oss.top237.top/2025/10/21/68f73952a3c1b.jpg'",
    "bg-img-url": "url('https://oss.top237.top/2025/10/21/68f73952a3c1b.jpg')",
  },
};

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  theme: {
    options: { customProperties: true },
    defaultTheme: getLocalDark() ? "defaultCustomDarkTheme" : "defaultCustomTheme",
    themes: {
      defaultCustomTheme,
      defaultCustomDarkTheme,
    },
  },
});
